<template>
  <div class="login-container">
    <div class="bg-circle">
      <img
        class="lt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u3.png"
        alt=""
      >
      <img
        class="lb"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u5.png"
        alt=""
      >
      <img
        class="rt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u4.png"
        alt=""
      >
    </div>
    <div class="main">
      <img
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u25.png"
        alt=""
      >
      <el-card shadow="never">
        <div class="title">
          <img
            src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u24.png"
            alt=""
          >
          <h2>人力资源后台管理</h2>
        </div>
        <!--登录表单-->
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入手机号">
              <template #prefix>
                <img
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u13.png"
                  alt=""
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              type="password"
              show-password
            >
              <template #prefix>
                <img
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u17.png"
                  alt=""
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="verify">
            <el-input v-model="ruleForm.verify" placeholder="请输入验证码">
              <template #prefix>
                <img
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u21.png"
                  alt=""
                >
              </template>
              <template #append>
                <span @click="randomFigure">{{ checkCode }}</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox
              v-model="ruleForm.isAgree"
            >用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="login-btn"
              @click="submitForm(ruleForm)"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LoginIndex',
  data() {
    return {
      ruleForm: {
        name: '',
        password: ''
      },
      rules: {
        pass: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        verify: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            pattern: /^[0-9a-z]{4}$/,
            message: '请输入正确的验证码',
            trigger: 'blur'
          }
        ]
      },
      checkCode: '',
      name: '18737375358',
      password: '123456'
    }
  },
  mounted() {
    this.randomFigure()
  },
  methods: {
    randomFigure() {
      let code = ''
      const codeLength = 4
      const random = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9
      ]

      for (let i = 0; i < codeLength; i++) {
        const index = Math.floor(Math.random() * 10)
        code += random[index]
      }
      this.checkCode = code
    },
    submitForm(ruleForm) {
      console.log(ruleForm)
      console.log(this.checkCode)
      console.log(ruleForm.verify)
      if (
        ruleForm.name === this.name &&
        ruleForm.password === this.password &&
        ruleForm.verify === this.checkCode
      ) {
        // setInterval(function () {
        this.$router.push('/')
        // }, 2000)
        this.$message({
          showClose: true,
          message: '登录成功',
          type: 'success'
        })
      } else if (ruleForm.verify !== this.checkCode) {
        this.$message({
          showClose: true,
          message: '验证码错误',
          type: 'error'
        })
      } else {
        this.$message({
          showClose: true,
          message: '账号密码错误',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  position: relative;
  height: 100%;
  background-image: linear-gradient(#3fccfd, #996cfb);
  overflow: hidden;

  // 三个圆形图片的位置
  .bg-circle {
    .lt {
      position: absolute;
      left: 40px;
      top: 40px;
      opacity: 0.3;
    }
    .lb {
      position: absolute;
      left: -250px;
      bottom: -200px;
    }
    .rt {
      position: absolute;
      right: -70px;
      top: -200px;
    }
  }

  // 主体内容
  .main {
    // 水平和垂直居中
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;

    // 登录卡片
    .el-card {
      margin-left: 60px;

      // 卡片标题
      .title {
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 23px;
        font-weight: 700;
        font-style: normal;
        color: rgb(67, 141, 238);

        img {
          width: 50px;
          height: 42px;
        }
      }

      // 登录表单文本框
      .el-input {
        width: 350px;
        height: 44px;

        // 文本框内容
        ::v-deep .el-input__inner {
          background-color: #f4f5fb;
          height: 44px;
        }

        // 文本框头部图标样式
        img {
          width: 20px;
          height: 20px;
          margin-top: 12px;
        }

        // 文本框尾部验证码样式
        ::v-deep .el-input-group__append {
          font-family: "Arial Negreta", "Arial Normal", "Arial";
          font-weight: 700;
          font-size: 16px;
          color: #ff7733;
          // height: 44px;
        }
      }

      // 复选款样式
      .el-checkbox {
        color: #606266;
      }

      // 登录按钮样式
      .login-btn {
        width: 350px;
      }
    }
  }
}
</style>
